<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网友Adam'分享原创图片滑动Jquery插件(最新修正版本)</title>
<link href="http://www.jq-school.com/tool/jc/css/public.css" rel="stylesheet" type="text/css" media="all" />
<style>
<!-- 
/* jQuery jcSlider css */
body { overflow-x:hidden; }
.jcSlider { width:956px; position:relative; height:300px; background:url(img/sliderbg.png) no-repeat; padding:9px;}
.imgHide { width:956px; height:300px; overflow:hidden; position:relative; }
.imgList { height:9999%; width:9999%; position:absolute; top:0; left:0; z-index:1;}
.imgList li { position:absolute; left:0; top:0; height:300px; width:956px; list-style:none; display:none; overflow:hidden; }
.imgNum { position:absolute; left:0; top:0; z-index:2; display:none; }
.imgNum dd { width:14px; height:14px; float:left; list-style:none; cursor:pointer;  margin:0 3px; overflow:hidden; }
.imgNum dd a { display:block; height:14px; width:14px; text-indent:-999em; overflow:hidden; text-align:center; line-height:14px; background:url(img/pagination.png) no-repeat 0 0; }
.imgNum dd a:hover,.imgNum dd.select a { background-position:0 -14px; }
.imgPrev,.imgNext { position:absolute; left:0; top:10px; z-index:3; display:block; cursor:pointer; height:300px; width:40px; }
.imgPrev { background:url(img/navigation-previous.png) no-repeat left center;}
.imgNext { background:url(img/navigation-next.png) no-repeat right center;}

/* demo2 add css */
#demo2 .imgNum dd { width:24px; height:24px; float:left; list-style:none; cursor:pointer;  margin:0 4px; overflow:hidden; }
#demo2 .imgNum dd a { display:block; height:24px; width:24px; overflow:hidden; text-indent:0; text-align:center; line-height:24px; background:url(img/NumBtn.png) no-repeat 0 -27px; color:#000; font-size:13px; }
#demo2 .imgNum dd a:hover,#demo2 .imgNum dd.select a {  background-position:0 0; color:#fff; }




-->
</style>
<script src="http://www.jq-school.com/js/jquery-1.7.2.min.js" language="javascript" type="text/javascript"></script>
<script src="http://www.jq-school.com/js/jQuery-easing.js" language="javascript" type="text/javascript"></script>
<script src="js/jQuery-jcSlider.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
<!-- 
$(function(){
    $("#demo1").jcSlider({
		loadPath:'img/loading.gif'	
	});
	
    $("#demo2").jcSlider({
		speed:"easeInOutQuart",
		Default : 1,
		setMode:'fade',
		loadPath:'img/loading.gif',
		setloadSize : {
			loadWidth : 32,
			loadHeight : 32 
		},
		autoPlay:true,
		autoTime:1500,
		arrow : false,
		numBtn:true,
		numBtnEvent:'mouseover', 
		numBtnPos:'right', 
		setNumBtn : {
			x : 0,
			y : 275
		},
		scaling:false
	});
	
    $("#demo3").jcSlider({
		speed:"easeInOutExpo",
		loadPath:'img/loading.gif',
		Default : 1,
		setMode:'y',
		autoPlay:true,
		autoTime:1000, 
		arrow : true, 
		arrowOffsetX : 90, 
		subtle: {
			prev : 6,
			next : 10
		},
		numBtn:false,
		scaling:false      
	});
});
-->
</script>
</head>

<body>

<!-- HTML 开始 -->

<!-- demo 1 -->
<div class="demoTitle">Adam ’ jQuery 横向jcSlider展示（ 默认效果 - 横向滚动 setMode ： x   ）</div>

<div id="demo1" class="jcSlider">
    <ul class="imgList">
        <li><a><img src="http://b3.images22.51img1.com/6000/riddick_ls/30f0184c74d88e5e4f6b2b0304a5a59c.png" alt="图片一" /></a></li>
        <li><a><img src="http://bc.images22.51img1.com/6000/riddick_ls/c4abb1b84dc468f3da68c37898e18f09.png" alt="图片二" /></a></li>
        <li><a><img src="http://b5.images22.51img1.com/6000/riddick_ls/5b387eab0c69dc3da4a51b6f4fb8576b.png" alt="图片三" /></a></li>
        <li><a><img src="http://ba.images22.51img1.com/6000/riddick_ls/a96bf5b093e42062f8d60357a3113ae2.png" alt="图片四" /></a></li>
        <li><a><img src="http://b3.images22.51img1.com/6000/riddick_ls/30f0184c74d88e5e4f6b2b0304a5a59c.png" alt="图片五" /></a></li>
        <li><a><img src="http://bc.images22.51img1.com/6000/riddick_ls/c4abb1b84dc468f3da68c37898e18f09.png" alt="图片六" /></a></li>
        <li><a><img src="http://b5.images22.51img1.com/6000/riddick_ls/5b387eab0c69dc3da4a51b6f4fb8576b.png" alt="图片七" /></a></li>
        <li><a><img src="http://ba.images22.51img1.com/6000/riddick_ls/a96bf5b093e42062f8d60357a3113ae2.png" alt="图片八" /></a></li>
    </ul>
</div>

<div class="demoTitle">Adam ’ jQuery 隐现jcSlider展示（ 隐现效果 setMode ： fade  ）</div>

<div id="demo2" class="jcSlider">
    <ul class="imgList">
        <li><a><img src="http://b3.images22.51img1.com/6000/riddick_ls/30f0184c74d88e5e4f6b2b0304a5a59c.png" alt="图片一" /></a></li>
        <li><a><img src="http://bc.images22.51img1.com/6000/riddick_ls/c4abb1b84dc468f3da68c37898e18f09.png" alt="图片二" /></a></li>
        <li><a><img src="http://b5.images22.51img1.com/6000/riddick_ls/5b387eab0c69dc3da4a51b6f4fb8576b.png" alt="图片三" /></a></li>
        <li><a><img src="http://ba.images22.51img1.com/6000/riddick_ls/a96bf5b093e42062f8d60357a3113ae2.png" alt="图片四" /></a></li>
    </ul>
</div>

<div class="demoTitle">Adam ’ jQuery 纵向jcSlider展示（ 纵向滚动 setMode ： y  ）</div>

<div id="demo3" class="jcSlider">
    <ul class="imgList">
        <li><a><img src="http://b3.images22.51img1.com/6000/riddick_ls/30f0184c74d88e5e4f6b2b0304a5a59c.png" alt="图片一" /></a></li>
        <li><a><img src="http://bc.images22.51img1.com/6000/riddick_ls/c4abb1b84dc468f3da68c37898e18f09.png" alt="图片二" /></a></li>
        <li><a><img src="http://b5.images22.51img1.com/6000/riddick_ls/5b387eab0c69dc3da4a51b6f4fb8576b.png" alt="图片三" /></a></li>
        <li><a><img src="http://ba.images22.51img1.com/6000/riddick_ls/a96bf5b093e42062f8d60357a3113ae2.png" alt="图片四" /></a></li>
    </ul>
</div>
<!-- HTML 结束  -->
<div id="psWraper">
    <div id="ps" style=" width:950px;">
        <div id="psText">
        	<samp>首先感谢 jQuery-School ( <a>http://www.jq-school.com</a> ) 对 Adam' 的支持！支持原创，支持前端！</samp>
            <h2>jQuery-jcSlider 功能版（ 修正版 ）</h2>
            <ul>
            	<li>修正内容：<li>
                <li>1. 优化冗余代码，减少代码量，减少对Dom的操作，提高jQuery性能。</li>
                <li>2. 全面兼容各个浏览器(IE6+ 、Sarfai 、Chrome 、 Firefox 等等 )。</li>
                <li>3. 提高插件重用性、复用性。</li>
                <li>4. 优化CSS减少代码量。</li>
                <li>5. 增加图片预加载功能</li>
            </ul>
            <p>jQuery-jcSlider 调用简单，插件实用！只需修改插件参数 及 CSS便能实现想要的效果！如有宝贵意见请联系Adam ’
            </p>
        </div>
        <h1>jQuery-jcSlider插件<p>by Adam ’</p></h1>
        <dl style="clear:both"> 
            <h2>* 插件说明 及 相关参数</h2>
            <dt>jQuery - jcSlider v 2.4</dt>
            <dt>Copyright(c) 2012 by Adam ’ </dt>
            <dt>QQ : 1741498</dt>
            <dt>E-mail : 1741498@qq.com</dt>
            <dt>Date: 2012-01-02</dt>
            
            <dd><span>speed:300,</span> //图片切换速度设置，提供easing.js值 或 时间值(mm)</dd>
            <dd><span>Default : 1,</span> //设置默认显示图片</dd>
            <dd><span>setMode:'x',</span> //设置slider切换模式，提供fade,x,y三种模式</dd>
            <dd><span>loadPath:"../img/gif",</span> //预加载loading图片路径,如../img/gif</dd>
            <dd><span>setloadSize : { loadWidth : 32, loadHeight : 32 },</span> //设置loading图片大小(px)</dd>
            <dd><span>autoPlay:true,</span> //是否开起自动播放功能，提供true,false</dd>
            <dd><span>autoTime:2000,</span> //自动播放间隔时间(mm)</dd>
            <dd><span>arrow : true,</span> //左右按钮开关，提供true,false</dd>
            <dd><span>arrowOffsetX : 0,</span> //设置左右按钮X偏移(px)</dd>
            <dd><span>subtle: { prev : 0, next : 0 },</span>微调左右按钮的偏移位置，如 -200</dd>
            <dd><span>numBtn:true,</span> //数字按钮开关，提供true,false</dd>
            <dd><span>numBtnEvent:'click',</span> //设置数字按钮事件，提供click,mouseover等</dd>
            <dd><span>numBtnPos:'center',</span> //数字按钮位置，提供left,center,right</dd>
            <dd><span>setNumBtn : { x : 0, y : 0 },</span> //设置数字按钮的X，Y偏移(px)</dd>
            <dd><span>scaling:true,</span> //是否设置图片大小，提供true,false</dd>
            <dd><span>setScaling : { width:956, height:300 }</span> //固定图大小(px)</dd>
        </dl>
    </div>
</div>
</body>
</html>
